<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    /* 设置开关的大小和背景颜色 */
    label {
        width: 60px;
        height: 30px;
        margin-left: 40px;
        border-radius: 20px;
        position: relative;
        background-color: lightgrey;
        cursor: pointer;
        transition: background-color 0.5s;
    }

    /* 设置控制开关的按钮 */
    input[type='checkbox']+label::before {
        position: absolute;
        content: '';
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: whitesmoke;
        top: 3px;
        left: 1px;
        z-index: 1;
    }

    /* 设置关 */
    input[type='checkbox']+label::after {
        content: '关';
        position: absolute;
        color: white;
        left: 40px;
        top: 3px;
    }

    label[disabled] {
        cursor: not-allowed;
        opacity: 0.5;
    }

    label::after,
    label::before {
        transition: linear 0.3s;
    }

    /* 给默认选中的开关设置新的背景色 */
    input[type='checkbox']:checked+label {
        background-color: lightsalmon;
    }

    input[type='checkbox']:checked+label::before {
        left: 35px;
    }

    input[type='checkbox']:checked+label::after {
        content: '开';
        left: 5px;
    }
</style>

<body>
    <div class="box">
        <input type="checkbox" id="switch" checked hidden>
        <label for="switch"></label>
        <input type="checkbox" id="switch-open" checked disabled hidden>
        <label for="switch-open" disabled></label>
        <input type="checkbox" id="switch-close" disabled hidden>
        <label for="switch-close" disabled></label>
    </div>
</body>

</html>